<template>
  <div class="top">
    <!-- 支付页面 -->
    <van-nav-bar title="确认付款" left-arrow @click-left="$router.go(-1)" />
    <massage-card
      iconColor="red"
      icon="van-icon van-icon-gold-coin-o"
      name="商品总额:"
      :nameRight="`￥${$store.getters.total}`"
      namebot="订单号"
      nameRightColor="red"
    ></massage-card>
    <massage-card
      :name="obj.address"
      :nameRight="obj.mobile"
      :namebot="obj.address"
      icon="van-icon van-icon-location-o"
      iconColor="blue"
    ></massage-card>
    <div class="joinShopping" @click="goShopping">
      微信支付 {{ $store.getters.total }} ￥
    </div>
  </div>
</template>

<script>
import massageCard from "../order/massageCard.vue";
import { payment } from "@/api/index.js";
import { ref } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    let obj = ref([]);
    let store = useStore();
    let token = localStorage.getItem("token");
    payment(token).then((res) => {
      console.log(res);
      obj.value = res;
      console.log(obj.value);
    });
    function goShopping() {
      let obj = {
        price: store.getters.total, // 支付价钱
        id: new Date().getTime(), // 生成订单后的id字段
        token: localStorage.getItem("token"), // 代表了是哪个用户
      };
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe93d3f996beab1eb&redirect_uri=http://www.wyunfei.com/&response_type=code&scope=snsapi_userinfo&state=${JSON.stringify(
        obj
      )}#wechat_redirect`;
    }

    return {
      obj,
      goShopping,
    };
  },
  components: { massageCard },
};
</script>

<style lang="scss" scoped>
.joinShopping {
  width: 100%;
  height: 100px;
  background-color: #b7282e;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 28px;
  color: #fff;
  justify-content: center;
}
::v-deep .van-nav-bar .van-icon {
  color: black;
}
.top {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
